<template>
  <qf-card className="test1" title="测试1" btnTitle="随意" btnUrl="/user">
    <template #filter>
      <h1>搜索</h1>
      <h1>日期</h1>
    </template>

    <qf-table :tableData="tableData" :columns="columns"></qf-table>

    <qf-form :width="80" :formItem="formItem" :formBtns="formBtns"></qf-form>
  </qf-card>
</template>

<script>
export default {
  data() {
    return {
      // 表单配置
      formItem: [
        // ...
        {
          label: "用户名",
          width: 100,
          rules: [
            { required: true, message: "用户名必须", trigger: "blur" },
            { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
          ],

          field: "uname",

          disabled: false,
          placeholder: "请输入用户名",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          label: "密码",
          width: 100,
          rules: [
            { required: true, message: "密码必须", trigger: "blur" },
            { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
          ],
          field: "pwd",

          disabled: false,
          placeholder: "请输入密码",
          icon: "el-icon-lock",
          type: "password",
        },
        {
          label: "请选择密保问题",
          width: 200,
          field: "question",
          rules: [
            { required: true, message: "请选择密保问题", trigger: "change" },
          ],

          disabled: false,
          placeholder: "请输入密保问题",
          type: "select",
          payload: [
            { label: "你大爷名字", value: "你大爷名字" },
            { label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
            { label: "你初念的名字", value: "你初念的名字" },
          ],
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          content: "创建",
          type: "primary",
          click: (formData) => console.log("表单数据", formData),
        },
        {
          content: "重置",
          type: "",
        },
      ],

      tableData: [
        { id: 1, a: 2, b: 3, c: 4, status: true, status2: 1 },
        { id: 1, a: 2, b: 3, c: 4, status: false, status2: 0 },
        { id: 1, a: 2, b: 3, c: 4, status: false, status2: 1 },
        { id: 1, a: 2, b: 3, c: 4, status: true, status2: 1 },
      ],

      columns: [
        { title: "编号", field: "id" },
        { title: "测试a", field: "a" },
        { title: "测试b", field: "b" },
        {
          title: "状态",
          field: "status",
          type: "switch",
          payload: {
            open: true,
            close: false,
            change: (row) => console.log(row),
          },
        },
        {
          title: "状态2",
          field: "status2",
          type: "switch",
          payload: {
            open: 1,
            close: 0,
            change: (row) => console.log(row),
          },
        },
        {
          title: "列标题",
          field: "列填充字段",
          width: 300,
          fixed: "right",
          type: "btn",
          payload: [
            {
              name: "修改用户",
              type: "primary",
              click: (row) => console.log("修改", row),
            },
            {
              name: "分配角色",
              type: "success",
              click: (row) => console.log("分配角色", row),
            },
            {
              name: "删除",
              type: "danger",
              click: (row) => console.log("删除", row),
            },
          ],
        },
      ],
    };
  },
};
</script>
